import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import './app-visual-rate.less';

/**
 * @description 虚拟表单评分器
 * @export
 * @class AppVisualRate
 * @extends {Vue}
 */
@Component({})
export class AppVisualRate extends Vue {

  /**
   * @description 编辑器实列
   * @type {*}
   * @memberof AppVisualRate
   */
  @Prop() editorInstance!: any;

  /**
   * @description 表单项
   * @type {*}
   * @memberof AppVisualRate
   */
  @Prop() public parentItem!: any;

  /**
   * @description 编辑器值
   * @type {string}
   * @memberof AppVisualRate
   */
  @Prop() public value!: string;

  /**
   * @description 编辑器名称
   * @type {string}
   * @memberof AppVisualRate
   */
  @Prop() public name!: string;

  /**
   * @description 编辑器位置
   * @type {*}
   * @memberof AppVisualRate
   */
  @Prop() public position!: any;

  /**
   * @description 代码表服务
   * @type {*}
   * @memberof AppVisualRate
   */
  @Prop() public codeListService!: any;

  /**
   * @description 上下文
   * @type {string}
   * @memberof AppVisualRate
   */
  @Prop() context!: any;

  /**
   * @description 视图参数
   * @type {string}
   * @memberof AppVisualRate
   */
  @Prop() viewparam!: any;

  /**
   * @description 真实控件
   * @type {string}
   * @memberof AppVisualRate
   */
  @Prop() realCompRef!: any;

  /**
   * @description 最大评分
   * @type {number}
   * @memberof AppVisualRate
   */
  public maxValue: number = 5;

  /**
   * @description 评分列表
   * @type {any[]}
   * @memberof AppVisualRate
   */
  public starList: any[] = [];

  /**
   * @description 监听最大值
   * @param {number} newVal 新值
   * @param {number} oldVal 旧值
   * @memberof AppVisualRate
   */
  @Watch('realCompRef.maxItem',{deep:true,immediate:true})
  public maxValueChange(newVal: number, oldVal: number) {
    if(newVal) {
      this.maxValue = newVal;
      this.initStarList();
      this.updatedStarList(Number(this.value));
    }
  }

  /**
   * @description 初始化评分列表
   * @memberof AppVisualRate
   */
  public initStarList() {
    for (let i = 1; i <= this.maxValue; i++) {
      this.starList.push({
        isSelect: false,
        isHalf: false,
        value: i,
      });
    }
  }

  /**
   * @description 更新评分
   * @memberof AppVisualRate
   */
  public updatedStarList(value: number) {
    this.starList.forEach((star: any, index: number) => {
      star.isSelect = index < value ? true : false;
      star.isHalf = index + 0.5 === value ? true : false;
    });
  }

  /**
   * @description 值变化
   * @param {*} $newValue
   * @memberof AppVisualRate
   */
  public starChange(newValue: any) {
    this.$emit('change', { name: this.name, value: newValue });
  }

  /**
   * @description 绘制组件
   * @return {*}
   * @memberof AppVisualRate
   */
  public render() {
    return (
     <div class={['app-visual-rate', 'luckysheet-mousedown-cancel', this.realCompRef?.disabled ? 'disabled' : '']}>
       {this.starList.map((star: any) => {
          return (
            <div
              class={{'app-visual-rate-item': true, 'rating-item--active': star.isSelect, 'luckysheet-mousedown-cancel': true}}
              onClick={() => this.starChange(star.value)}
              > 
              {
                star.isSelect ? 
                <img
                  class="app-visual-rate-icon luckysheet-mousedown-cancel"
                  src={`${star.isHalf ? "../assets/dist/assets/iconfont/cc-star-half.svg" :  "../assets/dist/assets/iconfont/star.svg"}`}>
                </img>
                :
                <img
                  class="app-visual-rate-icon luckysheet-mousedown-cancel"
                  src={`${star.isHalf ? "../assets/dist/assets/iconfont/cc-star-half.svg" :  "../assets/dist/assets/iconfont/cc-star.svg"}`}>
                </img>
              }
            </div>
          );
        })}
     </div>
    );
  }
}
